<template>
<el-form ref="form" :model="form" class="setting-container" label-width="150px" style="width: 520px;margin:auto;margin-top: 20px;">
  <el-form-item label="Python环境选择：">
    <el-select v-model="pythonVersion" placeholder="请选择">
      <el-option
        v-for="item in pythonOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="硬件配置：">
    <el-cascader
      v-model="hardwareConfig"
      :options="hardwareOptions"
      :props="hardwareProps"
      placeholder="请选择"
    ></el-cascader>
  </el-form-item>
  <el-form-item label="PaddlePaddle版本：">
    <el-select v-model="paddleVersion" placeholder="请选择">
      <el-option
        v-for="item in paddleOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="Pip版本：">
    <el-select v-model="pipVersion" placeholder="请选择">
      <el-option
        v-for="item in pipOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="CUDA版本：">
    <el-select v-model="cudaVersion" placeholder="请选择">
      <el-option
        v-for="item in cudaOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit">设置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
export default {
  name: "Setting",
  data() {
    return {
      pythonVersion: "",
      pythonOptions: [
        { value: "3.6.1", label: "3.6.1" },
        { value: "3.7.1", label: "3.7.1" },
        { value: "3.8.1", label: "3.8.1" },
        { value: "3.9.1", label: "3.9.1" },
        { value: "3.10.0", label: "3.10.0" },
      ],
      hardwareConfig: [],
      hardwareOptions: [
        {
          value: "GPU",
          label: "GPU",
          children: [
            { value: "A100", label: "A100" },
            { value: "3090", label: "3090" },
            { value: "其他型号", label: "其他型号" },
          ],
        },
        { value: "CPU", label: "CPU" },
      ],
      hardwareProps: {
        expandTrigger: "hover",
        checkStrictly: true,
      },
      paddleVersion: "",
      paddleOptions: [
        { value: "2.0.0", label: "2.0.0" },
        { value: "2.1.0", label: "2.1.0" },
        { value: "2.2.0", label: "2.2.0" },
      ],
      pipVersion: "",
      pipOptions: [
        { value: "20.3.4", label: "20.3.4" },
        { value: "21.1.2", label: "21.1.2" },
        { value: "21.2.4", label: "21.2.4" },
      ],
      cudaVersion: "",
      cudaOptions: [
        { value: "10.1", label: "10.1" },
        { value: "10.2", label: "10.2" },
        { value: "11.0", label: "11.0" },
        { value: "11.1", label: "11.1" },
        { value: "11.2", label: "11.2" },
      ],
    };
  },
  methods:{
    submit(){
      // 处理设置逻辑
      // ...

      // 显示提示消息
      this.$message({
        type: "success",
        message: "设置成功！",
      });
    }
  },

  mounted() {
    // 设置默认值
    this.pythonVersion = "3.7.1"; // 设置默认 Python 版本
    this.hardwareConfig = ["GPU", "A100"]; // 设置默认硬件配置
    this.paddleVersion = "2.2.0"; // 设置默认 PaddlePaddle 版本
    this.pipVersion = "21.2.4"; // 设置默认 Pip 版本
    this.cudaVersion = "11.2"; // 设置默认 CUDA 版本
  },
};
</script>

<style scoped>
.setting-container {
  margin: 20px;
}

.setting-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.setting-label {
  min-width: 160px;
  display: inline-block;
}

.setting-button {
  margin-top: 20px;
}
</style>
